<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8">
        <title>导航</title>

        <style type="text/css">
            .wrapper { 
                margin: 10px auto ; 
                border: 1px solid blue ;
            }

            .wrapper>p {
                margin: 5px ;
                font-weight: bold ;
                color: blue ;
            }

            /* 复合选择器 之 亲子选择器 ( 直接子元素选择器 ) */
            .wrapper>div {
                height: 30px ;
                line-height: 30px ;
                margin: 5px ; /* 上下左右外边距全部都是同一个值 */
            }
        </style>

    </head>

    <body>

        <h1>HTML + CSS</h1>

        <a href="https://www.w3.org">W3C</a>
        <a href="http://developer.mozilla.org">MDN web docs</a>
        <a href="https://www.w3school.com.cn">W3School</a>
        <a href="https://www.runoob.com">菜鸟教程(奔跑的小鸟)</a>

        <hr>

        <h3>HTML: HyperText Markup Language , 超文本标记语言</h3>

        <ul>
            <li>标记(markup)也称作标签(tag)
                <ul>
                    <li>标签总是成对出现的(包括开始标签和结束标签)</li>
                    <li>理解什么是 开始标签 和 结束标签</li>
                    <li>理解什么是 自封闭标签</li>
                </ul>
            </li>
            <li>
                属性(attribute)是开始标签的一个组成部分
                <ul>
                    <li>属性由 属性名称 和 属性值 组成</li>
                </ul>
            </li>
            <li>
                元素(element)
                <ul>
                    <li>从 开始标签 到 结束标签 及 其中间所有内容 就是一个 元素</li>
                    <li>属性(attribute)是元素(element)的组成部分</li>
                </ul>
            </li>
            <li>
                常用标签
                <ul>
                    <li>
                        <a href="/tags/inline.html" >内联元素</a>
                    </li>
                    <li>
                        <a href="/tags/block.html" >块元素</a>
                    </li>
                    <li>
                        <a href="/tags/replaced.html" >可替换元素</a>
                    </li>
                </ul>
            </li>
            
        </ul>

        <hr>

        <h3>CSS: Cascading Style Sheets , 层叠样式表</h3>

        <div class="wrapper">
            <p>CSS的四种用法:</p>
            <div> <a href="/style/inline.html">内联样式(行内样式)</a> </div>
            <div> <a href="/style/embed.html">内嵌样式(内部样式)</a> </div>
            <div> <a href="/style/link.html">链接外部样式文件</a> </div>
            <div> <a href="/style/import.html">导入外部样式文件</a> </div>
        </div>

        <div class="wrapper">
            <p>基本选择器( simple selector )</p>
            <div> <a href="/simple/universal.html">通配符选择器(universal selector)</a> </div>
            <div> <a href="/simple/type.html">标记选择器(type selector)</a> </div>
            <div> <a href="/simple/class.html">CLASS选择器(class selector)</a> </div>
            <div> <a href="/simple/id.html">ID选择器(ID selector)</a> </div>
            <div> <a href="/simple/attribute.html">属性选择器(attribute selector)</a> </div>
            <div> <a href="/simple/pseudo.html">伪类(pseudo-class)</a> </div>
        </div>

        <div class="wrapper">
            <p>常用CSS属性 之 尺寸属性( Dimension )</p>
            <div> <a href="/properties/dimension/block.html">设置 块元素 的宽度和高度</a> </div>
            <div> <a href="/properties/dimension/inline.html">设置 内联元素 的宽度和高度</a> </div>
            <div> <a href="/properties/dimension/inline-block.html">设置 内联块 的宽度和高度</a> </div>
        </div>

        <div class="wrapper">
            <p>常用CSS属性 之 文本属性( Text ) 和 字体属性 ( Font )</p>
            <div> <a href="/properties/text-font/font.html">设置字体样式</a> </div>
            <div> <a href="/properties/text-font/text.html">设置文本样式</a> </div>
        </div>



        <hr>

        <div>
            在 Windows 系统中，通过 
            <span style="border : 1px solid gray; padding : 5px ;">taskkill /f /im 映像名称</span> 
            可以批量 杀死多个进程。
            比如:
            <span style="border : 1px solid gray; padding : 5px ;">taskkill /f /im nginx.exe</span> 
        </div>


    </body>

</html>